<template>
  <el-form
    ref="userRef"
    label-position="left"
    :model="userData"
    :rules="rules"
    :label-width="useFormLabelWidth('180px', '80px')"
  >
    <el-form-item
      v-for="data of set_user_data"
      :key="data.label"
      :label="data.label"
      :prop="data.value"
    >
      <el-input v-model="userData[data.value]" :maxlength="data.maxlength" />
    </el-form-item>
    <el-form-item :label="$t('common.sex')">
      <el-radio-group v-model="userData.sex">
        <el-radio label="0">{{ $t('common.man') }}</el-radio>
        <el-radio label="1">{{ $t('common.woman') }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="submit">{{ $t('common.save') }}</el-button>
      <el-button type="danger" size="small" @click="close">{{ $t('common.close') }}</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup name="UserInfo">
import { useFormLabelWidth } from '@/hooks/useFormLabelWidth'
import { set_user_data } from '@/views/Personal/_personal'
import { FormRules } from 'element-plus'

export interface GetUserDataType {
  [key: string]: string // 字段扩展声明
  userName: string
  phonenumber: string
  email: string
  sex: '0' | '1'
}
const props: { user: GetUserDataType } = withDefaults(defineProps<{ user: GetUserDataType }>(), {
  user: () => ({
    userName: 'admin',
    phonenumber: '15991905246',
    email: 'tdx137330@163.com',
    sex: '0'
  })
})
const userData = reactive<GetUserDataType>(props.user)
const rules: FormRules = {
  userName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
  email: [
    { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
    { type: 'email', message: "'请输入正确的邮箱地址", trigger: ['blur', 'change'] }
  ],
  phonenumber: [
    { required: true, message: '手机号码不能为空', trigger: 'blur' },
    { pattern: /0?(13|14|15|18|17)[0-9]{9}/, message: '请输入正确的手机号码', trigger: 'blur' }
  ]
}
const submit = () => {}
const close = () => {}
</script>

<style scoped lang="scss"></style>
